<template>
  <div>
    <header-login />
    <div class="bgc-white">
      <div class="container-width">
        <logo-bar :advantage="false" :search="false" :cart-count="false" :line-step="true" step="3" />
      </div>
    </div>
    <div class="container-width">
      <div class="bgc-white cart-container mar-t-20 mar-b-20">
        <div class="flex v-align-c border-b-line pad-l-30 pad-r-30 pad-t-26 pad-b-26">
          <img :src="iconSuccess" alt="" class="width-32 height-32 mar-r-10">
          <div>
            <div class="font-20">订单提交成功，请尽快付款！订单编号：{{payForm.orderNo}}</div>
          </div>
        </div>
        <div class="flex pad-t-21">
          <div class="amount-box align-c text-align-c">
            <div class="align-c">
              <div class="mar-t--2">支付金额:</div>
              <div class="font-30 font-w font-price-00B pad-t-5 pad-b-17">￥{{payForm.payOrderAmount}}</div>
              <div class="scan-box">
                <img :src="payForm.payCode" alt="" class="code-scan-pic">
                <div class="align-c">
                  <div class="flex v-align-c pad-t-17 pad-b-15">
                    <img :src="iconScan" alt="" class="width-24 height-23 mar-r-10">
                    <div class="font-16">
                      <p>打开手机{{payForm.payType === '46' ? '支付宝' : '微信'}}</p>
                      <p>扫一扫继续付款</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="scan-ri">
            <div class="font-20 font-blue-3FF cursor-p" @click="payType">切换支付方式></div>
            <div class="font-16 font-color-6 pad-t-4 mar-t-30 mar-b-12">支付成功请点击</div>
            <el-button class="pay-completed-btn" @click="handleBatPayByQRCode(payForm.orderId)">已完成支付</el-button>
          </div>
        </div>
        <div class="scan-bottom" />
      </div>
    </div>
    <div class="bgc-white">
      <div class="container-width">
        <footer-links />
      </div>
      <div class="footer-line" />
      <div class="container-width">
        <footer-infos />
      </div>
    </div>
    <pay-result ref="dialogPayResult" />
  </div>
</template>

<script lang="ts">
  import {
    defineComponent,
    onMounted,
    ref
  } from 'vue'
  import {
    useRouter
  } from 'vue-router'
  import headerLogin from '@/components/headerLogin/index.vue'
  import logoBar from '@/components/logoBar/index.vue'
  import footerLinks from '@/components/footerLinks/index.vue'
  import footerInfos from '@/components/footerInfos/index.vue'
  import iconSuccess from '@/assets/images/icon_success.png'
  import alipayPic from '@/assets/images/uploads/alipay-pic.png'
  import iconScan from '@/assets/images/icon_scan_pay.png'
  import {
    getOrderStatus
  } from '@/api/order/order'
  import payResult from './../components/payResult/index.vue'

  export default defineComponent({
    name: 'Cart',
    components: {
      headerLogin,
      logoBar,
      footerLinks,
      footerInfos,
      payResult
    },
    setup() {
      const router = useRouter()
      const payForm = router.currentRoute.value.query
      const dialogPayResult = ref(<any>null)

      onMounted(() => {
        handleBatPayByQRCode(payForm.orderId)
        setTimeout(() => {
          dialogPayResult.value.handleDialogOpen()
        }, 1500)
      })
      const payType = () => {
        router.push({
          path: '/buy/pay-type',
          query: {
            orderId: payForm.orderId
          }
        })
      }

      const timeoutHandle = ref( < any > '')
      // 轮询事件 验证扫码支付后状态
      const handleBatPayByQRCode = (orderId) => {
        if (timeoutHandle.value) {
          clearTimeout(timeoutHandle.value)
        }
        timeoutHandle.value = setTimeout(() => {
          getOrderStatus(orderId).then(response => {
            if (response.isError) return
            if (response.data > 0) {
              // 去支付成功页

            } else {
              handleBatPayByQRCode(orderId)
            }
          })
        }, 3000)
      }

      return {
        iconSuccess,
        iconScan,
        alipayPic,
        payType,
        payForm,
        handleBatPayByQRCode,
        dialogPayResult
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $bgBorder: #f5f6fa;

  .cart-container {
    min-height: 500px;

    .border-b-line {
      border-bottom: $bgBorder 1px solid;
    }

    .amount-box {
      width: 1017px;
      border-right: $bgBorder 1px solid;
      min-height: 389px;

      p {
        margin: 0;
        padding: 0;
      }
    }

    .scan-box {
      border: #eeeeee 1px solid;
    }

    .scan-ri {
      padding-top: 148px;
      padding-left: 72px;
    }

    .scan-bottom {
      height: 128px;
    }

    .code-scan-pic {
      width: 224px;
      height: 224px;
      border-bottom: #eeeeee 1px solid;
    }

    ::v-deep(.pay-completed-btn) {
      &.el-button {
        background: #ff500b;
        color: #fff;
        border-radius: 0;
        border: none;
        font-size: 20px;
        min-height: 48px;
        padding: 0 20px;
        width: 174px;
      }
    }
  }
</style>
